
<template>
    <div class="dialog-container" :style="[{display: status ? 'block' : 'none'}]">
        <div class="dialog-mask"></div>
        <div class="dialog-body bounceIn">
            {{content}}
        </div>
    </div>
</template>

<script>
    export default {
        name: 'myDialog',
        props: ['content', 'status']
    }
</script>

<style lang="scss">
    @import "../style/function";
    @import "../style/color";

    .dialog-mask {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: $black;
        opacity: 0.6;
        z-index: 9999;
    }

    .dialog-body {
        width: pxToRem(550);
        padding: pxToRem(25);
        background-color: $white;
        color: $grey;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: pxToRem(-300);
        margin-top: pxToRem(-100);
        z-index: 9999;
        text-align: center;
        border-radius: pxToRem(20);
    }

    @keyframes bounceIn {
        from, 20%, 40%, 60%, 80%, to {
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        0% {
            opacity: 0;
            transform: scale3d(.3, .3, .3);
        }

        20% {
            transform: scale3d(1.1, 1.1, 1.1);
        }

        40% {
            transform: scale3d(.9, .9, .9);
        }

        60% {
            opacity: 1;
            transform: scale3d(1.03, 1.03, 1.03);
        }

        80% {
            transform: scale3d(.97, .97, .97);
        }

        to {
            opacity: 1;
            transform: scale3d(1, 1, 1);
        }
    }

    .bounceIn {
        animation-name: bounceIn;
        animation-duration: 0.8s;
    }
</style>
















